<template>
  <view class="dp-form" v-if="detail">
    <view style="width: 700rpx; margin: 0 auto; padding-bottom: 40rpx">
      <form @submit="formSubmit">
        <view class="item" style="margin-top: 20rpx">
          <view class="dp-form-item">
            <block v-if="detail.key == 'separate'">
              <view class="dp-form-separate">{{ detail.val1 }}</view>
            </block>
            <view v-if="detail.key != 'separate'" class="label"
              >{{ detail.val1
              }}<text v-if="detail.val3 == 1" style="color: red"> *</text></view
            >
            <block v-if="detail.key == 'input'">
              <text v-if="detail.val5" style="margin-right: 10rpx">{{
                detail.val5
              }}</text>
              <!-- 授权不可编辑S -->
              <block
                v-if="
                  detail.val4 == 2 &&
                  detail.val6 == 1 &&
                  (platform == 'mp' || platform == 'wx')
                "
              >
                <input
                  :type="
                    detail.val4 == 1 || detail.val4 == 2 ? 'digit' : 'text'
                  "
                  disabled="true"
                  :name="'form' + index"
                  class="input disabled"
                  :placeholder="detail.val2"
                  placeholder-style="font-size:28rpx"
                  style="background-color: #efefef"
                  :value="detail.content"
                  @input="setfield"
                  :data-formindex="'form' + index"
                />
                <button
                  class="authtel"
                  open-type="getPhoneNumber"
                  type="primary"
                  @getphonenumber="getPhoneNumber"
                  :data-index="index"
                >
                  获取手机号码
                </button>
              </block>
              <!-- 授权不可编辑E -->
              <block v-else>
                <input
                  :type="
                    detail.val4 == 1 || detail.val4 == 2 ? 'digit' : 'text'
                  "
                  readonly
                  :name="'form' + index"
                  class="input"
                  :placeholder="detail.val2"
                  placeholder-style="font-size:28rpx"
                  :value="detail.content"
                  @input="setfield"
                  :data-formindex="'form' + index"
                />
              </block>
            </block>
            <block v-if="detail.key == 'textarea'">
              <textarea
                :name="'form' + index"
                class="textarea"
                :placeholder="detail.val2"
                placeholder-style="font-size:28rpx"
                :value="detail.content"
                @input="setfield"
                :data-formindex="'form' + index"
              />
            </block>
            <block v-if="detail.key == 'radio'">
              <radio-group
                class="flex"
                :name="'form' + index"
                style="flex-wrap: wrap"
                @change="setfield"
                :data-formindex="'form' + index"
              >
                <label
                  v-for="(item1, index1) in detail.val2"
                  :key="item1.id"
                  class="flex-y-center"
                >
                  <radio
                    class="radio"
                    :value="item1"
                    :checked="
                      detail.content && detail.content == item1 ? true : false
                    "
                  />{{ item1 }}
                </label>
              </radio-group>
            </block>
            <block v-if="detail.key == 'checkbox'">
              <checkbox-group
                :name="'form' + index"
                class="flex"
                style="flex-wrap: wrap"
                @change="setfield"
                :data-formindex="'form' + index"
              >
                <label
                  v-for="(item1, index1) in detail.val2"
                  :key="item1.id"
                  class="flex-y-center"
                >
                  <checkbox
                    class="checkbox"
                    :value="item1"
                    :checked="
                      detail.content && inArray(item1, detail.content)
                        ? true
                        : false
                    "
                  />
                  {{ item1 }}
                </label>
              </checkbox-group>
            </block>
            <block v-if="detail.key == 'selector'">
              <picker
                class="picker"
                mode="selector"
                :name="'form' + index"
                :value="editorFormdata[index]"
                :range="detail.val2"
                @change="editorBindPickerChange"
                :data-index="index"
                :data-formindex="'form' + index"
              >
                <view
                  v-if="editorFormdata[index] || editorFormdata[index] === 0"
                >
                  {{ detail.val2[editorFormdata[index]] }}</view
                >
                <view v-else>请选择</view>
              </picker>
            </block>
            <block v-if="detail.key == 'time'">
              <picker
                class="picker"
                mode="time"
                :name="'form' + index"
                :value="detail.content"
                :start="detail.val2[0]"
                :end="detail.val2[1]"
                :range="detail.val2"
                @change="editorBindPickerChange"
                :data-index="index"
                :data-formindex="'form' + index"
              >
                <view v-if="editorFormdata[index]">{{
                  editorFormdata[index]
                }}</view>
                <view v-else>请选择</view>
              </picker>
            </block>
            <block v-if="detail.key == 'date'">
              <picker
                class="picker"
                mode="date"
                :name="'form' + index"
                :value="detail.content"
                :start="detail.val2[0]"
                :end="detail.val2[1]"
                :range="detail.val2"
                @change="editorBindPickerChange"
                :data-index="index"
                :data-formindex="'form' + index"
              >
                <view v-if="editorFormdata[index]">{{
                  editorFormdata[index]
                }}</view>
                <view v-else>请选择</view>
              </picker>
            </block>

            <block v-if="detail.key == 'region'">
              <uni-data-picker
                :localdata="items"
                popup-title="请选择省市区"
                :placeholder="detail.content || '请选择省市区'"
                @change="onchange"
                :data-formindex="'form' + index"
              ></uni-data-picker>
              <!-- <picker class="picker" mode="region" :name="'form'+index" value="" @change="editorBindPickerChange" :data-index="index">
                                <view v-if="editorFormdata[index]">{{editorFormdata[index]}}</view> 
                                <view v-else>请选择省市区</view>
                            </picker> -->
              <input
                type="text"
                style="display: none"
                :name="'form' + index"
                :value="regiondata ? regiondata : detail.content"
              />
            </block>
            <block v-if="detail.key == 'upload'">
              <input
                type="text"
                style="display: none"
                :name="'form' + index"
                :value="editorFormdata[index]"
              />
              <view class="flex" style="flex-wrap: wrap; padding-top: 20rpx">
                <view class="dp-form-imgbox" v-if="editorFormdata[index]">
                  <view
                    class="dp-form-imgbox-close"
                    @tap="removeimg"
                    :data-index="index"
                    :data-formindex="'form' + index"
                  >
                    <image src="/static/img/ico-del.png" class="image"></image>
                  </view>
                  <view class="dp-form-imgbox-img">
                    <image
                      class="image"
                      :src="editorFormdata[index]"
                      @click="previewImage"
                      :data-url="editorFormdata[index]"
                      mode="widthFix"
                      :data-index="index"
                    />
                  </view>
                </view>
                <view
                  v-else
                  class="dp-form-uploadbtn"
                  :style="{
                    background:
                      'url(' +
                      static_url +
                      '/static/img/shaitu_icon.png) no-repeat 60rpx',
                    backgroundSize: '80rpx 80rpx',
                    backgroundColor: '#F3F3F3',
                  }"
                  @click="editorChooseImage"
                  :data-index="index"
                  :data-formindex="'form' + index"
                >
                </view>
              </view>
            </block>
            <!-- #ifdef H5 || MP-WEIXIN -->
            <block v-if="detail.key == 'upload_file'">
              <input
                type="text"
                style="display: none"
                :name="'form' + index"
                :value="editorFormdata[index]"
              />
              <view class="flex" style="flex-wrap: wrap; padding-top: 20rpx">
                <view class="dp-form-imgbox" v-if="editorFormdata[index]">
                  <view
                    class="dp-form-imgbox-close"
                    @tap="removeimg"
                    :data-index="index"
                    :data-formindex="'form' + index"
                  >
                    <image src="/static/img/ico-del.png" class="image"></image>
                  </view>
                  <view
                    style="
                      overflow: hidden;
                      white-space: pre-wrap;
                      word-wrap: break-word;
                      color: #4786bc;
                      width: 530rpx;
                    "
                    @tap="download"
                    :data-file="editorFormdata[index]"
                  >
                    {{ editorFormdata[index] }}
                  </view>
                </view>
                <view
                  v-else
                  class="dp-form-uploadbtn"
                  :style="{
                    background:
                      'url(' +
                      static_url +
                      '/static/img/shaitu_icon.png) no-repeat 60rpx',
                    backgroundSize: '80rpx 80rpx',
                    backgroundColor: '#F3F3F3',
                  }"
                  @click="chooseFile"
                  :data-index="index"
                  :data-formindex="'form' + index"
                ></view>
              </view>
            </block>
            <!-- #endif -->
          </view>
        </view>
        <button
          class="set-btn"
          form-type="submit"
          :style="{ background: '' + t('color1') + '' }"
        >
          保存
        </button>
      </form>
    </view>
  </view>
</template>
<script>
var app = getApp();
export default {
  data() {
    return {
      opt: {},
      fromrecord: 0,
      orderid: 0,
      pre_url: getApp().globalData.pre_url,
      static_url: app.globalData.static_url,
      data: "",
      editorFormdata: [],
      test: "test",
      regiondata: "",
      items: [],
      tmplids: [],
      submitDisabled: false,
      formvaldata: {},
      authphone: "",
      platform: "",

      index: "",
      detail: "",
    };
  },
  onLoad: function (opt) {
    var that = this;
    var opt = app.getopts(opt);
    if (opt && opt.index >= 0) {
      that.opt = opt;
      that.index = opt.index;
      that.platform = app.getplatform();
      that.getarea();
      that.getdata();
    }
  },
  methods: {
    getarea: function () {
      var that = this;
      app.get(
        app.globalData.static_url + "/static/area.json",
        { id: 0 },
        function (res) {
          that.items = res;
        }
      );
    },
    getdata: function () {
      var that = this;
      var index = that.index;
      app.get(
        "My/otherset",
        {
          index: index,
        },
        function (res) {
          if (res.status == 1) {
            uni.setNavigationBarTitle({
              title: res.detail.val1,
            });
            that.detail = res.detail;
          } else {
            app.alert(res.msg);
          }
        }
      );
    },
    onchange(e) {
      const value = e.detail.value;
      this.regiondata =
        value[0].text + "," + value[1].text + "," + value[2].text;
    },
    setfield: function (e) {
      var field = e.currentTarget.dataset.formindex;
      var value = e.detail.value;
      this.formvaldata[field] = value;
    },
    editorChooseImage: function (e) {
      var that = this;
      var index = e.currentTarget.dataset.index;
      var tplindex = e.currentTarget.dataset.tplindex;
      var editorFormdata = this.editorFormdata;
      if (!editorFormdata) editorFormdata = [];
      app.chooseImage(function (data) {
        editorFormdata[index] = data[0];
        console.log(editorFormdata);

        that.$set(that.editorFormdata, index, data[0]);
        that.editorFormdata = editorFormdata;
        that.test = Math.random();

        var field = e.currentTarget.dataset.formindex;
        that.formvaldata[field] = data[0];
      });
    },
    removeimg: function (e) {
      var that = this;
      var index = e.currentTarget.dataset.index;
      var tplindex = e.currentTarget.dataset.tplindex;
      var field = e.currentTarget.dataset.formindex;
      var editorFormdata = this.editorFormdata;
      if (!editorFormdata) editorFormdata = [];
      editorFormdata[index] = "";

      that.$set(that.editorFormdata, index, "");
      that.editorFormdata = editorFormdata;
      that.test = Math.random();
      that.formvaldata[field] = "";
    },
    editorBindPickerChange: function (e) {
      var index = e.currentTarget.dataset.index;
      var tplindex = e.currentTarget.dataset.tplindex;
      var val = e.detail.value;
      var editorFormdata = this.editorFormdata;
      if (!editorFormdata) editorFormdata = [];
      editorFormdata[index] = val;
      console.log(editorFormdata);
      this.editorFormdata = editorFormdata;
      this.test = Math.random();

      var field = e.currentTarget.dataset.formindex;
      this.formvaldata[field] = val;
    },
    getPhoneNumber: function (e) {
      var that = this;
      var index = e.currentTarget.dataset.index;
      var field = "form" + index;
      if (that.authphone) {
        that.test = Math.random();
        that.detail.content = that.authphone;
        that.formvaldata[field] = that.authphone;
        return true;
      }
      if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
        app.error("请同意授权获取手机号");
        return;
      }
      if (!e.detail.iv || !e.detail.encryptedData) {
        app.error("请同意授权获取手机号");
        return;
      }
      wx.login({
        success(res1) {
          console.log("res1");
          console.log(res1);
          var code = res1.code;
          //用户允许授权
          app.post(
            "Index/authphone",
            {
              iv: e.detail.iv,
              encryptedData: e.detail.encryptedData,
              code: code,
              pid: app.globalData.pid,
            },
            function (res2) {
              if (res2.status == 1) {
                that.authphone = res2.tel;
                that.test = Math.random();
                that.detail.content = that.authphone;
                that.formvaldata[field] = that.authphone;
              } else {
                app.error(res2.msg);
              }
              return;
            }
          );
        },
      });
    },
    download: function (e) {
      var that = this;
      var file = e.currentTarget.dataset.file;
      // #ifdef H5
      window.location.href = file;
      // #endif

      // #ifdef MP-WEIXIN
      uni.downloadFile({
        url: file,
        success: (res) => {
          var filePath = res.tempFilePath;
          if (res.statusCode === 200) {
            uni.openDocument({
              filePath: filePath,
              showMenu: true,
              success: function (res) {
                console.log("打开文档成功");
              },
            });
          }
        },
      });
      // #endif
    },
    chooseFile: function (e) {
      var that = this;
      var index = e.currentTarget.dataset.index;
      var field = e.currentTarget.dataset.formindex;

      var editorFormdata = this.editorFormdata;
      if (!editorFormdata) editorFormdata = [];

      var up_url =
        app.globalData.baseurl +
        "Imageupload/uploadImg/aid/" +
        app.globalData.aid +
        "/platform/" +
        app.globalData.platform +
        "/session_id/" +
        app.globalData.session_id;

      // #ifdef H5
      uni.chooseFile({
        count: 1, //默认100
        extension: [".zip", ".exe", ".js"],
        success: function (res) {
          console.log(res);
          const tempFilePaths = res.tempFiles;

          //for (var i = 0; i < tempFilePaths.length; i++) {
          app.showLoading("上传中");
          console.log(tempFilePaths[0]);
          uni.uploadFile({
            url: up_url,
            filePath: tempFilePaths[0]["path"],
            name: "file",
            success: function (res) {
              app.showLoading(false);
              var data = JSON.parse(res.data);
              if (data.status == 1) {
                that.formvaldata[field] = data.url;

                editorFormdata[index] = data.url;

                that.$set(that.editorFormdata, index, data.url);
                that.editorFormdata = editorFormdata;
              } else {
                app.alert(data.msg);
              }
            },
            fail: function (res) {
              app.showLoading(false);
              app.alert(res.errMsg);
            },
          });
          //}
        },
      });
      // #endif
      // #ifdef MP-WEIXIN
      wx.chooseMessageFile({
        count: 1,
        type: "file",
        success(res) {
          // tempFilePath可以作为 img 标签的 src 属性显示图片
          const tempFilePaths = res.tempFiles;
          console.log(tempFilePaths);

          //for (var i = 0; i < tempFilePaths.length; i++) {
          app.showLoading("上传中");
          console.log(tempFilePaths[0]);
          uni.uploadFile({
            url: up_url,
            filePath: tempFilePaths[0]["path"],
            name: "file",
            success: function (res) {
              app.showLoading(false);
              var data = JSON.parse(res.data);
              if (data.status == 1) {
                that.formvaldata[field] = data.url;

                editorFormdata[index] = data.url;

                that.$set(that.editorFormdata, index, data.url);
                that.editorFormdata = editorFormdata;
              } else {
                app.alert(data.msg);
              }
            },
            fail: function (res) {
              app.showLoading(false);
              app.alert(res.errMsg);
            },
          });
          //}
        },
        complete(res) {
          console.log(res);
        },
      });
      // #endif
    },

    formSubmit: function (e) {
      var that = this;
      var detail = that.detail;
      var index = that.index;
      var formvaldata = that.formvaldata;

      if (detail.key == "region") {
        formvaldata["form" + index] = that.regiondata;
      }
      if (
        detail.key != "separate" &&
        detail.val3 == 1 &&
        (formvaldata["form" + index] === "" ||
          formvaldata["form" + index] === null ||
          formvaldata["form" + index] === undefined ||
          formvaldata["form" + index].length == 0)
      ) {
        app.alert(detail.val1 + " 必填" + detail.val2 + detail.val4);
        return;
      }
      if (detail.key == "switch") {
        if (formvaldata["form" + index] == false) {
          formvaldata["form" + index] = "否";
        } else {
          formvaldata["form" + index] = "是";
        }
      }
      if (detail.key == "selector") {
        formvaldata["form" + index] = detail.val2[formvaldata["form" + index]];
      }
      if (
        detail.key == "input" &&
        detail.val4 &&
        formvaldata["form" + index] !== "" &&
        formvaldata["form" + index]
      ) {
        if (detail.val4 == "2") {
          //手机号
          if (!/^1[3456789]\d{9}$/.test(formvaldata["form" + index])) {
            app.alert(detail.val1 + " 格式错误");
            return;
          }
        }
        if (detail.val4 == "3") {
          //身份证号
          if (
            !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(
              formvaldata["form" + index]
            )
          ) {
            app.alert(detail.val1 + " 格式错误");
            return;
          }
        }
        if (detail.val4 == "4") {
          //邮箱
          if (!/^(.+)@(.+)$/.test(formvaldata["form" + index])) {
            app.alert(detail.val1 + " 格式错误");
            return;
          }
        }
      }

      app.showLoading("提交中");
      app.post(
        "My/otherset",
        { index: index, content: formvaldata["form" + index] },
        function (data) {
          app.showLoading(false);
          if (data.status == 1) {
            app.success(data.msg);
            setTimeout(function () {
              app.goback(true);
            }, 1000);
          } else {
            app.error(data.msg);
          }
        }
      );
    },
  },
};
</script>
<style>
.dp-form {
  height: auto;
  position: relative;
  width: 100%;
}

.dp-form .radio {
  transform: scale(0.7);
}

.dp-form .checkbox {
  transform: scale(0.7);
}

.dp-form-item {
  width: 100%;
  padding: 10rpx 0px;
  display: flex;
  align-items: center;
}

.dp-form-item:last-child {
  border: 0;
}

.dp-form-item .label {
  line-height: 70rpx;
  width: 140rpx;
  margin-right: 10px;
  flex-shrink: 0;
}

.dp-form-item .input {
  height: 70rpx;
  line-height: 70rpx;
  overflow: hidden;
  flex: 1;
  border: 1px solid #eee;
  padding: 0 8rpx;
  border-radius: 2px;
  background: #fff;
  flex: 1;
}

.dp-form-item .textarea {
  height: 180rpx;
  line-height: 40rpx;
  overflow: hidden;
  flex: 1;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 8rpx;
}

.dp-form-item .radio {
  height: 70rpx;
  line-height: 70rpx;
  display: flex;
  align-items: center;
}

.dp-form-item .radio2 {
  display: flex;
  align-items: center;
}

.dp-form-item .radio .myradio {
  margin-right: 10rpx;
  display: inline-block;
  border: 1px solid #aaa;
  background: #fff;
  height: 32rpx;
  width: 32rpx;
  border-radius: 50%;
}

.dp-form-item .checkbox {
  height: 70rpx;
  line-height: 70rpx;
  display: flex;
  align-items: center;
}

.dp-form-item .checkbox2 {
  display: flex;
  align-items: center;
  height: 40rpx;
  line-height: 40rpx;
}

.dp-form-item .checkbox .mycheckbox {
  margin-right: 10rpx;
  display: inline-block;
  border: 1px solid #aaa;
  background: #fff;
  height: 32rpx;
  width: 32rpx;
  border-radius: 2px;
}

.dp-form-item .layui-form-switch {
}

.dp-form-item .picker {
  line-height: 70rpx;
  flex: 1;
}

.dp-form-item2 {
  width: 100%;
  border-bottom: 1px #ededed solid;
  padding: 10rpx 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dp-form-item2:last-child {
  border: 0;
}

.dp-form-item2 .label {
  height: 70rpx;
  line-height: 70rpx;
  width: 100%;
  margin-right: 10px;
}

.dp-form-item2 .value {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  flex: 1;
}

.dp-form-item2 .input {
  height: 70rpx;
  line-height: 70rpx;
  overflow: hidden;
  width: 100%;
  border: 1px solid #eee;
  padding: 0 8rpx;
  border-radius: 2px;
  background: #fff;
  flex: 1;
}

.dp-form-item2 .textarea {
  height: 180rpx;
  line-height: 40rpx;
  overflow: hidden;
  width: 100%;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 8rpx;
}

.dp-form-item2 .radio {
  height: 70rpx;
  line-height: 70rpx;
  display: flex;
  align-items: center;
}

.dp-form-item2 .radio2 {
  display: flex;
  align-items: center;
}

.dp-form-item2 .radio .myradio {
  margin-right: 10rpx;
  display: inline-block;
  border: 1px solid #aaa;
  background: #fff;
  height: 32rpx;
  width: 32rpx;
  border-radius: 50%;
}

.dp-form-item2 .checkbox {
  height: 70rpx;
  line-height: 70rpx;
  display: flex;
  align-items: center;
}

.dp-form-item2 .checkbox2 {
  display: flex;
  align-items: center;
  height: 40rpx;
  line-height: 40rpx;
}

.dp-form-item2 .checkbox .mycheckbox {
  margin-right: 10rpx;
  display: inline-block;
  border: 1px solid #aaa;
  background: #fff;
  height: 32rpx;
  width: 32rpx;
  border-radius: 2px;
}

.dp-form-item2 .layui-form-switch {
}

.dp-form-item2 .picker {
  height: 70rpx;
  line-height: 70rpx;
  flex: 1;
  width: 100%;
}

.dp-form-btn {
  margin: 50rpx auto;
  background: #1684fc;
  color: #fff;
  text-align: center;
  line-height: 100rpx;
  border-radius: 8rpx;
}

.flex-y-center {
  margin-right: 20rpx;
}

.dp-form-imgbox {
  margin-right: 16rpx;
  margin-bottom: 10rpx;
  font-size: 24rpx;
  position: relative;
}

.dp-form-imgbox-close {
  position: absolute;
  display: block;
  width: 32rpx;
  height: 32rpx;
  right: -16rpx;
  top: -16rpx;
  color: #999;
  font-size: 32rpx;
  background: #fff;
  z-index: 9;
  border-radius: 50%;
}

.dp-form-imgbox-close .image {
  width: 100%;
  height: 100%;
}

.dp-form-imgbox-img {
  display: block;
  width: 200rpx;
  height: 200rpx;
  padding: 2px;
  border: #d3d3d3 1px solid;
  background-color: #f6f6f6;
  overflow: hidden;
}

.dp-form-imgbox-img > .image {
  max-width: 100%;
}

.dp-form-imgbox-repeat {
  position: absolute;
  display: block;
  width: 32rpx;
  height: 32rpx;
  line-height: 28rpx;
  right: 2px;
  bottom: 2px;
  color: #999;
  font-size: 30rpx;
  background: #fff;
}

.dp-form-uploadbtn {
  position: relative;
  height: 200rpx;
  width: 200rpx;
}

.dp-form-separate {
  width: 100%;
  padding: 20rpx;
  text-align: center;
  padding: 20rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #454545;
}

.authtel {
  border-radius: 10rpx;
  line-height: 68rpx;
  margin-left: 10rpx;
  padding: 0 10rpx;
}

.input.disabled {
  background: #efefef;
}

.item {
  background-color: #fff;
  padding: 30rpx;
  overflow: hidden;
  border-radius: 12rpx;
}

.item_name {
  width: 320rpx;
  float: left;
  line-height: 40rpx;
}

.item_content {
  width: 320rpx;
  float: left;
  line-height: 40rpx;
  text-align: right;
}

.set-btn {
  width: 90%;
  margin: 60rpx 5%;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 48rpx;
  color: #ffffff;
  font-weight: bold;
}
</style>
